<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style>
            *{
                margin: 0px;
                padding: 0px;
                list-style: none;
            }
            .a{
                height: 66px;
                
                border-bottom: 1px solid #000;
            }
            .b{
                width: 1212px;
                height: 512px;
                
                margin:25px auto
            }
            .c{
                width: 1212px;
                height: 36px;
                
                margin:0px auto;
            }
            .d{
                width: 1212px;
                height: 1000px;
                
                margin:25px auto;
                
            }
            .e{
                width: 1212px;
                height: 38px;
                
                margin:0px auto;
                text-align: center;
                /* 行高等于标签高度的时候，文本垂直居中 */
                line-height: 38px;
            }
            h1{
                width: 30px;
                height: 50px;
                margin: 20px;
                float: left;
            }
            .a1{
                width: 100px;
                float: left;
            }
            a{
               float: right;
            }
            .d li{
                float: left;
                width: 200px;
                height: 200px;
                border:1px dashed #dc0115;
                margin: 30px;
            }
            .f li{
                float: left;
            }
            .w li{
                float: left;
            }
            .b1 img{
                height: 500px;
                width: 600px;
                float: left;
                margin: 10px;
            }
            .b li{
                float: right;
                height: 200px;
                width: 200px;

            }
            ,q{
                float: left;
            }

        </style>
    </head>
    <body>
        <div class="a">
            <h1>三</h1>
            <div class="a1">
                <span>赞</span>
            <span>萌</span>
            <span>哈</span>
            <span>艹</span>
            <span>买</span>
            </div>
            <a href="">登录</a>
        </div>
        <div class="b">
            <div class="b1">
                <img src="images/s003.jpg" alt="">
            </div>
            <ul>
                <li><img src="images/s02.jpg" alt=""></li>
                <li><img src="images/s03.jpg" alt=""></li>
                <li>
                    <img src="images/s04.jpg" alt="">
                </li>
            </ul>
            <div class="ul">
                <li>
                    <img src="" alt="">
                </li>
                <li><img src="" alt=""></li>
                <li><img src="" alt=""></li>
            </div>
        </div>
        <div class="c">
            <label for="">最新</label>
            <label for="">最热</label>
            <label for="">热议</label>
            <label for="">随机</label>
        </div>
            <ul class="d">
                <li>
                    <img src="images/i01.jpg" alt="">
                    <p>用水才能擦去笔迹，它只想保护好设 <br> 计师的创意</p>
                </li>
                <li>
                    <img src="images/i02.jpg" alt="">
                    <p>用水才能擦去笔迹，它只想保护好设 <br> 计师的创意</p>
                    
                </li>
                <li><img src="images/i03.jpg" alt="">
                    <p>用水才能擦去笔迹，它只想保护好设 <br> 计师的创意</p></li>
                <li><img src="images/i04.jpg" alt="">
                    <p>用水才能擦去笔迹，它只想保护好设 <br> 计师的创意</p></li>
                <li><img src="images/i05.jpg" alt="">
                    <p>用水才能擦去笔迹，它只想保护好设 <br> 计师的创意</p></li>
                <li><img src="i06.png" alt="">
                    <p>用水才能擦去笔迹，它只想保护好设 <br> 计师的创意</p></li>
                <li><img src="i07.jpg" alt="">
                    <p>用水才能擦去笔迹，它只想保护好设 <br> 计师的创意</p></li>
                <li><img src="i07.png" alt="">
                    <p>用水才能擦去笔迹，它只想保护好设 <br> 计师的创意</p></li>
                <li><img src="i08.jpg" alt="">
                    <p>用水才能擦去笔迹，它只想保护好设 <br> 计师的创意</p></li>
                <li><img src="i09.jpg" alt="">
                    <p>用水才能擦去笔迹，它只想保护好设 <br> 计师的创意</p></li>
                <li><img src="i10.jpg" alt="">
                    <p>用水才能擦去笔迹，它只想保护好设 <br> 计师的创意</p></li>
                <li><img src="i11.jpg" alt="">
                    <p>用水才能擦去笔迹，它只想保护好设 <br> 计师的创意</p></li>
                
            </ul>
        <div class="e">
            <p>太快了，慢慢来吧</p>
            <br><br>
        </div>
        <b>合作伙伴</b>
         <br><br>
        <div class="f">
            <ul>
                <li><img src="x01.png" alt=""></li>
                <li><img src="x02.png" alt=""></li>
                <li><img src="x03.png" alt=""></li>
                <li><img src="x04.png" alt=""></li>
                <li><img src="x05.png" alt=""></li>
                <li><img src="x06.png" alt=""></li>
                <li><img src="x07.png" alt=""></li>
            </ul>
        </div>

        <p class="q">友情链接</p>
        <br><br>
        <ul class="w">
            <li>DRC北京工业设计创意产业基地</li>
            <li>中国工业设计协会</li>
            <li>设计邦</li>
            <li>网易家居</li>
            <li>凤凰家具</li>
            <li>智东西</li>
            <li>壹网空间</li>
            <li>七牛云存库</li>
            <li>高清图片</li>
            <li>Fotor</li>
        </ul>
    </body>
</html>